<template>
    <a-layout   style="height: 100%">
        <a-layout-header  style="position:absolute;zIndex: 1;padding:0;width: 100%;height: 44px;">
            <div class="appset-user">
                <div>
                <span  v-if="['customIcon','userCustomIcon','jpaasIcon'].includes(appIcon.type)" >
                    <my-icon :type="appIcon.icon" style="margin-right: 5px;font-size: 18px"/>
                </span>
                    <span v-else>
                    <a-icon  :type="appIcon.icon"  style="margin-right: 5px;font-size: 18px"/>
                </span>
                    <router-link to='/design'  style="color: white">{{curApp.appName }}</router-link ></div>
                <span style="color:white;"> &nbsp;> &nbsp;{{curFunc.name}}</span>
                <div style="float: right;">
                    <div style="margin-top: 10px;cursor: pointer" @click="goBack"><div class="goBackTriangle"></div><span class="goBack-return">
                        {{$ti18('rxForm.return','返回')}}
                    </span></div>
                </div>
            </div>
        </a-layout-header>
        <!--中间区域-->
        <a-layout-content  class="index-layout-centers" style="margin-top: 44px;">
            <div class="center">？？？
                <template   v-if="curComponent.isView">
                    <component :is='curComponent.cmpt' :ref="curComponent.key" :key="curComponent.cmptKey"
                               :parentClick="go2Function" :open-type="curComponent.openType">
                    </component>
                </template>
                <template v-else>
                    <component :is='curComponent.cmpt' :ref="'ref'+`${curComponent.key}`"
                               :key="curComponent.cmptKey" :open-type="curComponent.openType">
                    </component>
                </template>
            </div>
        </a-layout-content>
    </a-layout>
</template>
<script>
import {mapState} from "vuex";
const APP_MAIN_URL="/design";
const APP_NAV_URL="modules/system/core/SysAppDevelop";
const APP_NAV_KEY="SysAppDevelop";

import {App} from "@lowcode/jpaas-common-lib";

export default {
    name: 'AppDesignLayout',
    mixins:[App],
    computed: {
        ...mapState({
            loading: state => state.appSetting.loading
        })
    },
    data() {
        return {
            curComponent:{},
            curFunc:{},
            appIcon: {},
        }
    },
    created() {
        this.init();
        this.switchComponents();
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "layoutsLang", key);
        },
        //初始化
        init(){
            let appIcon=this.$route.query.appIcon;
            if(!appIcon || appIcon==''){
                this.appIcon= {type:"customIcon",icon:"iconyingyong"};
                return ;
            }
            this.appIcon=JSON.parse(appIcon);
        },
        //返回
        goBack(){
            let key=this.curComponent.key;
            if(key==APP_NAV_KEY){
                this.$router.push(APP_MAIN_URL);
            }else{
                this.curFunc.naviUrl='';
                this.switchComponents();
            }
        },

        //跳到应用的功能
        go2Function(func){
            if(func){
                this.curFunc=func;
                this.switchComponents();
            }
        },
        //切换右边的组件
        switchComponents() {
            let func=this.curFunc;
            if(!func.naviUrl){
                func={naviUrl:APP_NAV_URL,key:APP_NAV_KEY,name:this.i18n('appDesignLayout.complete','应用开发')};
                this.curFunc=func;
            }
            let compt = require('@/views/' + func.naviUrl);
            let _obj = {
                cmpt: compt.default,
                key: func.key,
                cmptKey: func.key + '1',
                isView:(func.key==APP_NAV_KEY),
                openType:'app' //参数用于在应用开发的时候，打开某些列表，编辑新增按钮没有反应的情况，用于common-lib中的list.js
            };
            this.curComponent=_obj;
        }
    }

}
</script>
<style scoped>
.goBackTriangle{
    float: left;
    height:12px;
    width: 12px;
    border:12px solid;
    border-color:transparent white transparent  transparent ;
}
.goBack-return{
    width: 50px;
    display: block;
    height: 23px;
    float: left;
    text-align: center;
    line-height: 23px;
    border-radius: 0px 3px 3px 0px;
    background-color: white;
    color: #1890ff;

}
index-layout-centers {
    position: relative;
    overflow: initial;
    margin-left: 10px;
    margin-top: 10px;
}
.index-layout-centers > .center {
    position: absolute;
    top: 44px ;
    bottom: 0;
    width: 100%;
    overflow: auto;
    border-radius: 6px;
}
.appset-user{
    width: 100%;
    line-height: 44px;
    padding: 0px 10px;
    height: 44px;
    background-image: linear-gradient(90deg,
    #2f70ff 0%,
    #2ca8ff 100%),
    linear-gradient(
        #31539b,
        #31539b);
}
.appset-user >div:nth-child(1){
    float: left;
    color: white;
}

.appset-close{
    line-height: 43px;
    margin-left: 10px;
    color: white;
}
</style>